<template>
	<view :class="['vol-' + type]">
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

// 类型定义
type AlertType = 'primary' | 'success' | 'warning' | 'error' | 'info'

// Props定义
interface Props {
	type?: AlertType
}

const props = withDefaults(defineProps<Props>(), {
	type: 'primary'
})
</script>

<style lang="less" scoped>
.vol-primary {
	box-shadow: 1px 1px 9px #efefef;
	border: 1px solid #ddf0fb;
	background-color: #eef9ff;
	position: relative;
	border-radius: 4px;
	line-height: 26rpx;
	font-size: 26rpx;
	color: #404b50;
	letter-spacing: 1px;
	line-height: 1.9;
	padding: 10rpx 16rpx;
}

.vol-success {
	box-shadow: 1px 1px 9px #efefef;
	border: 1px solid #d4edda;
	background-color: #d1ecf1;
	position: relative;
	border-radius: 4px;
	line-height: 26rpx;
	font-size: 26rpx;
	color: #155724;
	letter-spacing: 1px;
	line-height: 1.9;
	padding: 10rpx 16rpx;
}

.vol-warning {
	box-shadow: 1px 1px 9px #efefef;
	border: 1px solid #ffeaa7;
	background-color: #fff3cd;
	position: relative;
	border-radius: 4px;
	line-height: 26rpx;
	font-size: 26rpx;
	color: #856404;
	letter-spacing: 1px;
	line-height: 1.9;
	padding: 10rpx 16rpx;
}

.vol-error {
	box-shadow: 1px 1px 9px #efefef;
	border: 1px solid #f5c6cb;
	background-color: #f8d7da;
	position: relative;
	border-radius: 4px;
	line-height: 26rpx;
	font-size: 26rpx;
	color: #721c24;
	letter-spacing: 1px;
	line-height: 1.9;
	padding: 10rpx 16rpx;
}

.vol-info {
	box-shadow: 1px 1px 9px #efefef;
	border: 1px solid #bee5eb;
	background-color: #d1ecf1;
	position: relative;
	border-radius: 4px;
	line-height: 26rpx;
	font-size: 26rpx;
	color: #0c5460;
	letter-spacing: 1px;
	line-height: 1.9;
	padding: 10rpx 16rpx;
}
</style>